<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    body{
      margin: 0;
    }
    img{
      width: 500px;
      height: 500px;
    }
  </style>
</head>
<body>

<button>载入图片</button>
<img src="#" alt="测试">

</body>
</html>


<script src="jq/jquery-1.12.2.js"></script>

<script>
  var oBtn = document.getElementsByTagName('button')[0];
  var oImg0 = document.images[0];
//  var arrayB = ["images/img1.gif","img/img2.gif","img/img3.gif","img/img4.gif"];
  var arrayL = ["images/1.jpg","images/2.jpg","images/3.jpg","images/4.jpg"];
  var iNow = -1;
  oBtn.onclick = function(){
    iNow++;
    iNow = iNow%4;
    oImg0.src = arrayL[iNow];
    aftLoadImg(arrayB,oImg0);
  }

  var aImages = [];
  window.onload = function(){
    preLoadImg(arrayL);
  }
  function preLoadImg(arr){
    for(var i = 0, len = arr.length; i < len; i++){
      aImages[i] = new Image();
      aImages[i].src = arr[i];
    }
  }
  function aftLoadImg(arr,obj){
    var oImg = new Image();
    oImg.onload = function(){
      obj.src = arr[iNow];
    }
    oImg.src = arr[iNow];
  }
</script>